import React, { useEffect, useState } from 'react';
import { getMVDetail, getMVUrl, getRelated, getComment, pushComment } from '@/api/recommend';
import { useParams, useNavigate } from 'react-router-dom'
import newStyle from '@/styles/recommendNew.module.scss'
import { LeftOutlined, LikeOutlined } from '@ant-design/icons'
// import { RightOutlined } from '@ant-design/icons'
import { List } from 'antd';


export default function MVDetail() {
  const navigate = useNavigate();

  const toList = () => {
    navigate(-1);
  };

  const { id } = useParams();
  const [MVDetailData, setMVDetailData] = useState([])
  const [relatedVideo, setRelatedVideo] = useState([])
  const [MVUrl, setMVUrl] = useState([])
  const [MVHotComment, setMVHotComment] = useState([])
  const [MVNewComment, setMVNewComment] = useState([])
  const [myComment, setMyComment] = useState('')

  // 获取推荐MV数据
  const getMVDetailData = (id) => {
    console.log(id);
    getMVDetail(id).then(res => {
      setMVDetailData(res.data.data)
    })
    getMVUrl(id).then(res => {
      // console.log(res.data.data.url);
      setMVUrl(res.data.data.url)
    })
    getRelated(id).then(res => {
      // console.log(res.data.data);
      setRelatedVideo(res.data.data)
    })
    getComment(id).then(res => {
      console.log(res.data);
      setMVHotComment(res.data.hotComments.slice(0, 10))
      setMVNewComment(res.data.comments.slice(0, 10))
    })
  }

  const formatTime = (time) => {
    const date = new Date(time);
    const year = date.getFullYear();
    const month = ('0' + (date.getMonth() + 1)).slice(-2);
    const day = ('0' + date.getDate()).slice(-2);
    const hours = ('0' + date.getHours()).slice(-2);
    const minutes = ('0' + date.getMinutes()).slice(-2);
    const seconds = ('0' + date.getSeconds()).slice(-2);
    const formattedDateTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    return formattedDateTime;
  }

  const submit = () => {
    // console.log(myComment);
    const commentData = {
      id: MVDetailData.id,
      t: 1,
      type: 1,
      content: myComment
    }
    // console.log(commentData);
    pushComment(commentData).then(() => {
      setMyComment('')
    })
  }
  useEffect(() => {
    getMVDetailData(id)
  }, [id])

  // console.log(topMVData);
  return (
    <>

      <div style={{ display: 'flex', width: '100%', height: '100%', overflow: 'auto' }}>
        <div className={newStyle.container}>
          <h2 onClick={toList}
            style={{ marginLeft: 40, marginTop: 20, cursor: 'pointer' }}
          >
            <LeftOutlined />&nbsp;MV列表
          </h2>
          <video
            src={MVUrl}
            controls
          />
          {/* 歌手信息 */}
          <section style={{ display: 'flex', alignItems: 'center' }}>
            <img
              style={{ width: 90, height: 90, borderRadius: '50%', marginLeft: 40 }}
              src={MVDetailData.artists?.[0].img1v1Url} alt="" />
            <p style={{ marginLeft: 15, fontSize: 18 }}>{MVDetailData.artists?.[0].name}</p>
          </section>
          {/* 歌名 */}
          <section style={{ fontSize: 24, fontWeight: 900, marginLeft: 40, marginTop: 30 }}>
            {MVDetailData.name}
          </section>
          {/* 数据 */}
          <p style={{ marginLeft: 40, marginTop: 10, color: '#999' }}>
            发布时间：{MVDetailData.publishTime}      &emsp;
            播放次数：{MVDetailData.playCount}
          </p>
          {/* 描述 */}
          <section style={{ marginLeft: 40, marginTop: 10, lineHeight: 1.6 }}>
            {MVDetailData.desc}
          </section>
          {/* 评论区 */}
          <h2 style={{ marginLeft: 40, marginTop: 20 }}>
            评论
          </h2>
          <div>
            <textarea style={{ marginLeft: 40, marginTop: 20, outline: 0 }} cols="110" rows="10" value={myComment} onChange={e => { setMyComment(e.target.value) }}></textarea>
            <button
              style={{ width: 60, height: 30, borderRadius: 15, marginLeft: 760, marginTop: 10, cursor: 'pointer' }}
              onClick={submit}
            >评论</button>
          </div>
          <div>
            <h3 style={{ width: '100%', marginLeft: 40, marginTop: 20 }}>热门评论</h3>
            <List
              // itemLayout="vertical"
              style={{ width: 660, marginLeft: 50, marginTop: 20 }}
              size="small"
              dataSource={MVHotComment}
              renderItem={(item) => (
                <List.Item >
                  <img
                    style={{ width: 60, height: 60, borderRadius: 30 }}
                    alt="logo"
                    src={item.user.avatarUrl}
                  />
                  <div>
                    <section style={{  width: 540, fontSize: 12, lineHeight: 1.5 }}>
                      <span style={{ color: 'skyblue', display: 'inline-block' }}>{item.user.nickname}:&emsp;</span>
                      {item.content}
                    </section>
                    <section style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <p style={{ lineHeight: '100%', marginTop: 15, color: '#888' }}>{formatTime(+item.time)}</p>
                      <p style={{ lineHeight: '100%', marginTop: 15, color: '#888' }}><LikeOutlined /> {item.likedCount}</p>
                    </section>
                  </div>
                </List.Item>
              )}
            />
          </div>
          {/* 最新评论 */}
          <div>
            <h3 style={{ width: '100%', marginLeft: 40, marginTop: 20 }}>最新评论</h3>
            <List
              style={{ width: 660, marginLeft: 50, marginTop: 20 }}
              size="small"
              dataSource={MVNewComment}
              renderItem={(item) => (
                <List.Item >
                  <img
                    style={{ width: 60, height: 60, borderRadius: 30 }}
                    alt="logo"
                    src={item.user.avatarUrl}
                  />
                  <div>
                    <section style={{ width: 540, fontSize: 12, lineHeight: 1.6 }}>
                      <span style={{ color: 'skyblue', display: 'inline-block' }}>{item.user.nickname}:&emsp;</span>
                      {item.content}
                    </section>
                    <section style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <p style={{ lineHeight: '100%', marginTop: 15, color: '#888' }}>{formatTime(+item.time)}</p>
                      <p style={{ lineHeight: '100%', marginTop: 15, color: '#888' }}><LikeOutlined /> {item.likedCount}</p>
                    </section>
                  </div>
                </List.Item>
              )}
            />
          </div>
        </div>
        {/* 相关推荐 */}
        <div>
          <h2 style={{ width: '100%', marginLeft: 120, marginTop: 20 }}>相关推荐</h2>
          <List
            // itemLayout="vertical"
            style={{ width: 660, marginLeft: 120, marginTop: 20, cursor: 'pointer' }}
            size="small"
            dataSource={relatedVideo}
            renderItem={(item) => (
              <List.Item key={item.id}>
                <img
                  style={{ width: 160, borderRadius: 15, cursor: 'pointer' }}
                  alt="logo"
                  src={item.coverUrl}
                />
                <div>
                  <section style={{ lineHeight: '100%', width: 400, fontSize: 16, overflow: 'hidden', whiteSpace: 'nowrap' }}>{item.title}</section>
                  <p style={{ lineHeight: '100%', marginTop: 15, color: '#888' }}>by {item.creator?.[0].userName}</p>
                </div>

              </List.Item>
            )}
          />
        </div>
      </div>
    </>
  );
}
